<template>
  <div class="login_bg">
    <div class="fixed_sm">copyright ©2021 XXXX－某某平台部－隔壁的－王同学</div>
    <div class="bg1 clearfix">
      <div class="left"><img src="@/common/assets/login/bg_left.png"></div>
      <div class="right">
        <div class="login_main">
          <div class="t1">系统登录</div>
          <div class="t2">ABL,专注业务</div>
          <!-- 账号 -->
          <div class="login_form">
            <input v-model="form.def.data.account" type="text" placeholder="请输入账号/手机号/邮箱"/>
          </div>
          <!-- 密码 -->
          <div class="login_form login_form2">
            <input v-model="form.def.data.password" @keyup.enter="openVerify" type="password" placeholder="请输入密码"/>
            <!-- <div class="fsyzm">发送验证码</div> -->
          </div>
          <!-- 密码 -->
          <!--          <div class="login_form login_form3">-->
          <!--            <input v-model="form.def.data.code" type="text" placeholder="输入图片验证码"/>-->
          <!--            <div>-->
          <!--              <div class="tpyzm"/>-->
          <!--            </div>-->
          <!--          </div>-->
          <!-- 登录 -->
          <div class="login_submit" @click="openVerify">
            <a class="login_btn">登录</a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <Vcode :show="show.verify" @success="login"/>

</template>

<script>
import {defineComponent} from "vue";
import md5 from "js-md5";
import $http from "@/common/util/http";
import $store from "@/common/store/_store";
import Vcode from "vue3-puzzle-vcode";

export default defineComponent({
  name: 'Login',
  components: {Vcode},
  mounted() {
  },
  data() {
    return {
      show: {
        loading: false,
        verify: false,
      },
      //表单
      form: {
        //默认表单
        def: {
          data: {
            account: '',
            password: '',
            code: '',
            type: '0',
          },
        },

      },

    };
  },
  methods: {
    openVerify() {
      if (!this.form.def.data.account) {
        this.$message.warning("请输入账号")
        return;
      }
      if (!this.form.def.data.password) {
        this.$message.warning("请输入密码")
        return;
      }
      this.show.verify = true;
    },
    login() {
      let password = md5(this.form.def.data.account + this.form.def.data.password)

      let data = {
        account: this.form.def.data.account,
        password: password.toUpperCase(),
        type: 0
      }

      this.$http.post('/system/user/login', data).then(async (res) => {
        this.show.verify = false;

        if (res.status) {
          localStorage.setItem("Token", res.data.token)
          localStorage.setItem("refreshToken", res.data.refreshToken)

          //查用户信息
          await $http.post('/system/user/loginUserInfo', {}).then((res) => {
            $store.state.userInfo = res.data
            localStorage.setItem("userId", $store.state.userInfo.id)
          })

          //查菜单
          await $http.post('/system/user/menu', {}).then((res) => {
            $store.state.routerOrigin = res.data
            $store.state.router = this.$kit.getTree(res.data)
          })

          let query = this.$route.query;

          if (query && query.redirect) {
            this.$router.push(query.redirect)
          } else {
            this.$router.push("/")
          }

        } else {
          this.$message.warning(res.message)
        }
      })

    },
  }
});
</script>

<style scoped lang="less">
/* 解决安卓图片可点击问题 */
* {
  padding: 0;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  font-family: "Microsoft YaHei", "PingFangSC", sans-serif;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  word-break: break-word;
  word-break: break-all;
  /*英文不溢出*/
  font-size: 14px;
}

input:focus {
  outline: none;
}

img {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  border: none;
  display: block;
  pointer-events: none;
  max-width: 100%;
}

.left {
  display: block;
  float: left;
}

.right {
  display: block;
  float: right;
}

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after {
  clear: both;
}

/* 登录 */
.fixed_sm {
  position: fixed;
  bottom: 10px;
  width: 100%;
  text-align: center;
  padding: 5px 10px;
  color: #fff;
}

.login_bg {
  width: 100%;
  height: 100vh;
  background: url(../../common/assets/login/bg.jpg) center no-repeat;
  background-size: cover;
}

.bg1 {
  width: 50%;
  max-width: 1000px;
  height: 500px;
  background: #fff;
  border-radius: 15px;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.bg1 .left,
.bg1 .right {
  width: 50%;
  height: 100%;
  position: relative;
}

.bg1 .left img {
  width: 50%;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.bg1 .right {
  padding: 0 30px;
}

.login_main {
  position: relative;
  width: 100%;
  padding: 30px 20px;
  margin: auto;
  z-index: 2;
}

.login_form {
  padding: 15px 20px;
  padding-left: 50px;
  background: url(../../common/assets/login/login_icon1.png) no-repeat 16px center;
  background-size: 16px;
  margin-bottom: 20px;
  border: 1px solid #eee;
  border-radius: 100px;
  position: relative;
}

.login_form2 {
  background: url(../../common/assets/login/login_icon2.png) no-repeat 16px center;
  background-size: 16px;
}

.login_form3 {
  background: url(../../common/assets/login/login_icon3.png) no-repeat 16px center;
  background-size: 20px;
}

.login_form input {
  border: 0px;
  width: 70%;
}

.login_form input::-webkit-input-placeholder {
  color: #ccc;
}

.login_submit {
  padding-top: 30px;
}

.login_submit .login_btn {
  display: block;
  background: #1395E7;
  color: #fff;
  width: 100%;
  font-size: 16px;
  text-align: center;
  border-radius: 100px;
  padding: 15px 0;
}

.t1 {
  color: #333;
  font-size: 30px;
  font-weight: 400;
  margin-top: 30px;
}

.t2 {
  color: #a9a9a9;
  font-size: 16px;
  font-weight: 400;
  margin: 10px 0;
  margin-bottom: 30px;
}

.fsyzm {
  color: #1395E7;
  position: absolute;
  right: 0px;
  top: 0px;
  line-height: 52px;
  padding-right: 25px;
  cursor: pointer;
}

.tpyzm {
  position: absolute;
  right: 0px;
  top: 0px;
  background: #eee;
  height: 100%;
  width: 120px;
  cursor: pointer;
  border-bottom-right-radius: 25px;
  border-top-right-radius: 25px;
  overflow: hidden;
}

@media (max-width: 768px) {

  .fixed_sm,
  .person_left,
  .bg1 .left {
    display: none;
  }

  .bg1 {
    width: 90%;
    height: 500px;
  }

  .t1 {
    font-size: 20px;
    margin-top: 10px;
  }

  .t2 {
    font-size: 14px;
  }

  .bg1 .right {
    width: 100%;
    float: inherit;
    padding: 0;
  }
}

</style>
